<template>
	<view>
		<view class="content">
			<view class="top_bar">
				<view @click="backLogin" class="top_bar_left">
					<image src="../../static/fh.png" mode=""></image>
				</view>
				<view @click="toRegister" class="top_bar_right">
					<view class="text">
						注册
					</view>
				</view>
			</view>
			<view class="logo">
				<image src='../../static/applogo.png' mode="heightFix"></image>
			</view>
			<view class="main">
				<text>登录</text>
			</view>
			<view class="main sub_main">
				<text>欢迎回来</text>
			</view>
			<view class="form_main">
				<input @blur="checkText" v-model="text" type="text" value="" placeholder="请输入用户名或邮箱" />
				<view class="show_help" v-show="textkey">
					请输入有效名称
				</view>
				<input@blur="checkPwd"  v-model="pwd" type="password" value="" placeholder="请输入密码"/>
				<view class="show_help" v-show="passwordkey">
					请输入有效名称
				</view>
			</view>
			<view class="but">
				<!-- <view class="sub"></view> -->
				<view @tap="submit" class="buts">
					登录
				</view>
				<!-- <view class="sub sub_reight"></view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utails/request.js'
	
	export default {
		data() {
			return {
				textkey:false,
				passwordkey:false,
				
				text:'',
				pwd:'',
				
				texterror:'',
				passworderror:''
			}
		},
		methods: {
			// 校验名称
			checkText(){
				let texts = /(^[a-zA-Z0-9_\u4e00-\u9fa5]{3,20}$)|(^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$)/
				if(texts.test(this.text)){
					this.textkey = false
				}else{
					this.texterror = '名称或邮箱格式错误'
					this.textkey = true
				}
			},
			// 校验密码
			checkPwd(){
				let texts = /^[a-zA-Z0-9]{8,16}$/
				if(texts.test(this.pwd)){
					this.passwordkey = false
				}else{
					this.passworderror = '密码格式错误'
					this.passwordkey = true
				}
			},
			
			
			// 表单提交
			async submit(){
				this.checkText()
				this.checkPwd()
				if(this.textkey==false&&this.passwordkey==false){
					let data = {
						username:this.text,
						password:this.pwd
					}
					
					const res = await request.request({url:'/login/',data, method:'POST'})
					// 保持用户数据
					if(res.id){
						// 保持数据
						uni.setStorageSync('userinfo',res)
						uni.setStorageSync('keys',res.keys)
						
						// 
						// console.log(this.socket);
						// 注册登录状态
						this.socket.emit('check_login',res.id)
						
						return uni.switchTab({
							url:'/pages/index/index',
						})
					}else{
						uni.showToast({
							title:'账号或密码错误',
							icon:'none',
							duration:2000
						})
					}
					
				}
			},
			
			// 去注册
			toRegister(){
				uni.navigateTo({
					url:'../register/register'
				})
			},
			
	
			// 返回上一页
			backLogin(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	
	
	/* logo */
	.logo{
		width: 300rpx;
		height: 180rpx;
		margin: 60rpx auto;
		margin-top: 198rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logo image{
		height: 180rpx;
	}
	
	.main{
		padding: 5rpx 60rpx;
		font-size: 60rpx;
		font-weight: 700;
	}
	.sub_main{
		font-size: 36rpx;
		color:#adadad
	}
	.form_main{
		padding: 20rpx 60rpx;
	}
	.form_main input{
		height: 120rpx;
		width: 100%;
		margin: 15rpx 0;
		border-radius: 6%;
		border-bottom: #808080 1rpx solid;
		font-size: 40rpx;
		font-weight: 500;
	}
	.show_help{
		color: #dd524d;
	}
	
	/* but */
	.but{
		margin: 80rpx 0;
		padding: 0 60rpx;
		
	}
	.but .buts{
		/* float: left; */
		margin: 0 auto;
		width: 80%;
		height: 105rpx;
		background-color: #f4ea2a ;
		font-size: 60rpx;
		line-height: 105rpx;
		text-align: center;
		color: white;
		/* 以数值 */
		border-radius: 48rpx;
		/* 显示阴影 */
		box-shadow: 0 50rpx 32rpx -36rpx #f4ea2a;
	}
	.but .sub{
		float: left;
		width: 20%;
		height: 105rpx;
		background-color: #f4ea2a ;
		border-radius: 50% 0 0 50%;
		box-shadow: 0 50rpx 32rpx -36rpx #f4f3d8;
	}
	.but .sub_reight{
		border-radius: 0 50% 50% 0;
	}

</style>
